<template>
	<!-- 点击歌单详情里面的歌曲 -->
	<view>
<<<<<<< HEAD
		<!-- <view class="bg" :style="{'background':'url('+playList.coverImgUrl+')'}"> -->
		<view class="bg" style="background: url(../../static/logo.png);">
		<!-- <view class="bg"> -->
		</view>
		<musicHeader :icon=true title='歌单' color='#fff'></musicHeader>
		<view class="container">
=======
		 <view class="bg" :style="{'background':'url('+songDetail.al.picUrl+')'}">
		
		
		</view>
		<u-toast ref="uToast" />
		<musicHeader :icon=true :title='songDetail.name' color='#fff'></musicHeader>
		<view class="container" v-show="!loading">
>>>>>>> detail
			<!-- 设置滚动区域 -->
		<scroll-view scroll-y="true" >
			<!-- 播放的 -->
		<view class="play">
			<!-- 头部播放的 -->
				<view class="play-top">
					<image src="../../static/logo.png" mode=""></image>
					<text>网易云音乐</text>
				</view>
				<view class="play-detail">
					
<<<<<<< HEAD
					<view class="play-img">  </view>
					<view class="play-icon">
						<u-icon name='play-circle'></u-icon>
=======
					<!-- <view class="play-img" :style="{'background':'url('+songDetail.al.picUrl+')'}"> </view> -->
					<view class="play-img" :class="{'playRotate':isPlayRotate}"> <image :src="songDetail.al.picUrl" mode=""   ></image> </view>
					<view class="play-icon">
						<u-icon v-if = 'isPlay' name='pause-circle' @click = play></u-icon>
						<u-icon v-else name='play-circle' @click = Pause></u-icon>
>>>>>>> detail
					</view>
					<view class="play-topImg">
						
					</view>
				</view>
			
		</view>	
<<<<<<< HEAD
		<!-- 歌词 -->
		<view class="liric">
			<view class="liric-item">测试歌曲测试歌曲测试歌曲测试歌曲</view>
			<view class="liric-item active">测试歌曲测试歌曲测试歌曲测试歌曲测试歌曲测试歌曲</view>
			<view class="liric-item">测试歌曲测试歌曲测试歌曲</view>
=======
		
		<view class="liric" style="transition: all .1s;">
			<!-- <view class="liric-item">测试歌曲测试歌曲测试歌曲测试歌曲</view> -->
			<view class="liric-item" :class="{active:layricIndex==index}" v-for="(item,index) in songLyric" :key='index'
			:style="{transform:'translateY('+ -(layricIndex-1)*50+'px)'}"
			>{{item.lyric}}</view>
>>>>>>> detail
		</view>
		
		<!-- 喜欢这首歌的人 -->
		<view class="music-like">
			<view class="like-top">
<<<<<<< HEAD
				<text>喜欢这首歌的人也在听</text>
				<text>一件收听</text>
			</view>
			<view class="lite-item">
=======
				<text style="color: #fff;">喜欢这首歌的人也在听</text>
				<text>一件收听</text>
			</view>
		<!-- 	<view class="lite-item">
>>>>>>> detail
				<image src="../../static/logo.png" mode=""></image>
				<view class="lite-item-name">
					<view >	蓝</view>
					<view > 石百	</view>
				</view>
				<view class="icon">
					<u-icon name='play-circle'></u-icon>
				</view>
<<<<<<< HEAD
=======
			</view> -->
			<view class="lite-item" v-for="(item,index) in songSimi" :key = 'index' @click="likePlay(item)">
					<image :src="item.album.picUrl" mode=""></image>
					<view class="lite-item-name">
						<view >	{{item.name}}</view>
						<view > {{item.album.artists[0].name}}	</view>
					</view>
					<view class="icon">
						<u-icon name='play-circle'></u-icon>
					</view>
				</view>
			
			
		</view>
		
		<!-- 精彩评论 -->
		<view class="comment">
			<view class="comment-title">
				精彩评论
			</view>
			<view class="comment-user" v-for="(item,index) in comment" :key='index'>
				<view class="comment-img">
					<image :src="item.user.avatarUrl" mode=""></image>
				</view>
				<view class="comment-content">
					<view class="comment-content-title">
						<view class="">
							<text>{{item.user.nickname}}</text>
							<br>
							<text>{{item.time | time}}</text>
						</view>
						<view class="icon">
							{{item.likedCount | count}}
							<u-icon name='thumb-up'></u-icon>
						</view>
					</view>
					<view class="comment-content-text">
						{{item.content}}
					</view>
				</view>
>>>>>>> detail
			</view>
		</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musicHeader from'../../components/musicHeader/musicHeader.vue'
<<<<<<< HEAD
=======
	// 导入接口
	import {songDetail,songSimi,songComment,songLyric,songUrl} from '../../api/api.js'
>>>>>>> detail
	export default {
		comments:{musicHeader},
		data() {
			return {
<<<<<<< HEAD
				
=======
				// 歌曲名称 封面
				songDetail:{
					al:{
						picUrl:''
					}
				},
				// 相似得歌曲
				songSimi:{},
				//歌曲得热门评论
				comment:[],
				// 歌词
				songLyric:[],
				layricIndex :0,
				// 播放
				isPlay:true,
				isPlayRotate:true,
				// loading
				loading:true,
>>>>>>> detail
			}
		},
		onLoad(option) {
			console.log(option.id)
<<<<<<< HEAD
		},
		methods: {
			
		}
=======
			this.getMusic(option.id)
			// this.songSimi(option.id)
		},
		// 离开当前组件
		onUnload(){
			this.clearLyric()
			// #ifdef H5
			// 销毁一下播放
			this.bgAudioManager.destroy()
			// #endif
			
		},
		onHide(){
			this.clearLyric()
			// #ifdef H5
			// 销毁一下播放
			this.bgAudioManager.destroy()
			// #endif
		},
		methods: {
			
			getMusic(id){
				// vuex提交当前id
				this.$store.commit('next',id)
				uni.showLoading({
				    title: '加载中'
					
				});
				this.loading = true

				// 获取歌曲名称 封面
				songDetail(id).then(res=>{
					
					if(res[1].data.code == '200') {
						this.songDetail = res[1].data.songs[0]
					}
					// console.log(this.songDetail)
				})
				//喜欢这首歌的人也在听
					songSimi(id).then(res=>{
						// console.log(res[1])
						if(res[1].data.code == '200') {
							this.songSimi = res[1].data.songs
						}
						// console.log(this.songSimi)
					})
				// 评论
				songComment(id).then(res=>{
					if(res[1].data.code == '200') {
						this.comment =res[1].data.hotComments
						console.log(res[1].data.hotComments)
					}
				})
				// 歌词
				songLyric(id).then(res=>{
					if(res[1].data.code == '200') {
						// console.log(res[1].data.lrc.lyric)
						var lyric = res[1].data.lrc.lyric
						// 写一个正则 把时间和歌词分开
						var reg =  /\[([^\]]+)\]([^\[]+)/g;
						// $1 第一个正则的匹配结果 
						// $2 第一个正则的匹配结果 
						// console.log( lyric.match(reg))
						var result = []
						lyric.replace(reg,($0,$1,$2)=>{
							result.push({
								'time':this.formatTimeToSec($1),
								'lyric':$2
							})
						})
						// console.log(result)
						this.songLyric = result
					}
					
				})
				// 获取url
				songUrl(id).then(res=>{
					if(res[1].data.code == '200'){
						console.log(res[1].data.data[0].url)
						if(res[1].data.data[0].url){
							
							// 开启一下h5和小程序共存
							// 微信小程序
							// #ifdef MP-WEIXIN
							this.bgAudioManager = uni.getBackgroundAudioManager();
							this.bgAudioManager.title =this.songDetail.name; //name
							// #endif
							// h5
							// #ifdef H5
							if(!this.bgAudioManager) {
								this.bgAudioManager = uni.createInnerAudioContext();
								this.isPlay = false //把icon换成播放
								this.isPlayRotate = false//停止旋转
							}
							// #endif
								this.bgAudioManager.src = res[1].data.data[0].url; //把url赋值
								this.LyricRoll()//调用歌曲滚动
							this.bgAudioManager.onPlay(()=>{ //监听播放
								this.isPlayRotate = true//开始旋转
								this.isPlay = true//把icon换成暂停
								this.LyricRoll()//调用歌曲滚动
							})
							this.bgAudioManager.onPause(()=>{ //监听暂停
								this.isPlayRotate = false //停止旋转
								this.isPlay = false//把icon换成播放
								
								this.clearLyric()//清除歌词的定时器
							})
							// 播放结束
							this.bgAudioManager.onEnded(()=>{
								// this.isPlayRotate = false
								// this.isPlay = false
								// this.clearLyric()
								this.getMusic(this.$store.state.nextId)
				this.bgAudioManager.play()

							})
							
						}else {
							this.$refs.uToast.show({
											title: '播放失败，请换一首',
											type: 'error',
											duration: '2300'
										})
						}
						this.loading = false
							  uni.hideLoading();
						}
				})
				
			},
			// 时间换成毫秒数
			formatTimeToSec(value){
				let arr = value.split(':');
				// 分钟*60 =秒 + 秒
				return (parseFloat(arr[0] * 60) + parseFloat(arr[1])).toFixed(1);
			},
			// 控制播放暂停
			play(){
				console.log(1)
				this.isPlay = false
				this.bgAudioManager.pause()
				
				
			},
			Pause(){
				console.log(2)
				this.bgAudioManager.play()
				
			},
			// 控制歌词滚动
			LyricRoll(){
				clearInterval(this.timer)
				this.timer = setInterval(()=>{
					for(var i=0;i<this.songLyric.length;i++){
						// 当值走到最后的时候
						if(this.bgAudioManager.currentTime >this.songLyric[this.songLyric.length-1].time ){
							this.layricIndex = this.songLyric.length-1;
							break;
						}
						if(this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime <this.songLyric[i+1].time){
							this.layricIndex = i
						}
					
					}
					// console.log(this.layricIndex)
				},500)
			},
			// 清除歌词滚动
			clearLyric(){
				clearInterval(this.timer)
			},
			// 相似歌曲播放
			likePlay(item){
				this.getMusic(item.id)
				// console.log(item)
			}
			
		},
		
>>>>>>> detail
	}
</script>

<style scoped lang="scss">

	.play-top{
		margin-top: 25px;
		color: #fff;
	}
.play-top image{
	
	width: 19px;
	height: 19px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 10px;
}
.play-detail {
	width: 320px;
	height: 320px;
	background: url(~@/static/disc.png);
	background-size: cover;
	margin: 0 auto;
	margin-top: 90px;
	position: relative;
}
.play-img {
	width: 195px;
	height: 195px;
	border-radius: 50%;
<<<<<<< HEAD
	background: url(~@/static/logo.png);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
=======
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	animation: 10s linear move infinite;
	animation-play-state: paused;
}
.playRotate {
	animation-play-state: running;
}
@keyframes move {
	from{
		transform: rotate(0deg) ;
	}
	to{
		transform: rotate(360deg);
	}
>>>>>>> detail
}
.play-topImg {
	width: 170px;
	height: 260px;
	background: url(~@/static/needle.png);
	background-size: cover;
	position: absolute;
	left: 43%;
	
	transform: translate(0,-50%);
}
.play-icon {
	position: absolute;
	color: #fff ;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	font-size: 100px;
}
.liric {
	width: 100%;
	height: 150px;
	overflow: hidden;
	text-align: center;
}
.liric .liric-item {
	height: 50px;
	line-height: 50px;
	color: #666;
<<<<<<< HEAD
=======
	transition:all .5s
>>>>>>> detail
}
.active {
		color: #fff !important;
	}
	// 喜欢的人也在听
	.music-like {
		margin:35px 30px 0px;
	}
	.like-top{
		display: flex;
		height: 40px;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	.like-top text:nth-child(2){
		display: block;
		width: 85px;
		height: 30px;
		border: 1px solid #fff;
		border-radius: 30px;
		text-align: center;
		line-height: 30px;
		color: #fff;
	}
<<<<<<< HEAD
=======
	.lite-item {
		display: flex;
		align-items: center;
		height: 70px;
	}
	.lite-item image {
		width: 40px;
		height: 40px;
		border-radius: 5px;
		margin-right: 10px;
	}
	.lite-item-name {
		flex: 1;
	}
	.lite-item-name view:nth-child(1){
		color: #fff;
	}
	.lite-item-name view:nth-child(2){
		color: #d0c7c8;
	}
	.lite-item .icon {
		font-size: 30px;
		color: #fff;
	}
	
	// 精彩评论
	.comment {
		margin:35px 30px 0px;
	}
	.comment-title {
		color: #fff;
		font-size: 16px;
	}
	.comment-user {
		margin-top: 20px;
		display: flex;
		
	}
	.comment-content {
		margin-left: 10px;
		width: 100%;
	}
	.comment-img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		overflow: hidden;
		image {
			width: 30px;
			height: 30px;
		}
	}
	.comment-content-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(255,255,255,.8);
		.icon {
			color: #fff;
		}
	}
	.comment-content-text {
		margin-top: 5px;
		color: #fff;
		font-size: 14px;
	}
>>>>>>> detail
</style>
